<template>
    <div>
            <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <Table :cols="cols" :data="rights">
            <template v-slot:level="{row:{level}}">
                <el-tag  :type="colors[level]">{{levels[level]}}级</el-tag>
            </template>
        </Table>
    </el-card>


    </div>
</template>

<script>
import Table from '@/components/Table.vue'
import {RightsList} from "../api/roles"
    export default {
  components: { Table },
        data() {
            return {
      colors:['','success','warning'],
      levels:['一','二','三'],

                rights:[],
                cols: [
                    {
                        title:"序号",
                        type:"index",
                        width:100
                    },
                    {
                        title:"权限名称",
                        name:"authName"
                    },
                    {
                        title:"路径",
                        name:"path"
                    },
                    {
                        title:"权限层级",
                        slot:"level"
                    },
                ]
            }
        },
        created () {
            this.getRights();
        },
        methods: {
           async getRights() {
                let res= await RightsList()
                console.log(res)
                this.rights=res.data
            }
        },
    }
</script>

<style lang="scss" scoped>
.el-card{
    margin-top: 15px;
}
</style>